<template>
	<view class="container">
		<div class="title">我的气象台</div>
		<div class="position">
			<image class="dingwei" src="/static/position.png" mode="widthFix"></image>
			<span>{{city}}</span>
			<!-- <uni-icons type="down" size="18" color="#999999"></uni-icons> -->
		</div>
		<div class="main">
			<div class="wendu">
				<p>{{currentWeather.wendu}}</p>
				<label>°</label>
				<image class="tianqiImage" :src="('../../static/weather/weatherIcon_'+currentWeather.tianqitu+'.png')"
					mode="widthFix"></image>
			</div>
			<span class="tianqi">{{currentWeather.tianqi}}</span>
		</div>
		<div class="grid">
			<div class="item">
				<image src="/static/weather/shi.png" mode="heightFix"></image>
				<span>{{currentWeather.shidu}}</span>
				<label>湿度</label>
			</div>
			<div class="item">
				<image src="/static/weather/neng.png" mode="heightFix"></image>
				<span>{{currentWeather.nengjiandu}}</span>
				<label>能见度</label>
			</div>
			<div class="item">
				<image src="/static/weather/feng.png" mode="heightFix"></image>
				<span>{{currentWeather.fengxiang}}</span>
				<label>风向</label>
			</div>
			<div class="item">
				<image src="/static/weather/feng.png" mode="heightFix"></image>
				<span>{{currentWeather.fengli}}</span>
				<label>风速</label>
			</div>
		</div>
		 <!-- 72小时预报趋势图形式 -->
		<div class="box" v-show="type===1" style="height: 620rpx;">
			<div class="name">
				<div class="left">
					<label></label>
					<p>72小时精细预报</p>
				</div>
				<div class="right">
					<div :class="type===1? 'active' : ''" @click="type=1">趋势</div>
					<div :class="type===2? 'active' : ''" @click="type=2">列表</div>
				</div>
			</div>
			<iframe style="width: 100%;border: none;height: 100%;"
				:src="hoursUrl"></iframe>
		
		</div>
		<!-- 72小时预报列表形式 -->
		<div class="box" v-show="type===2" style="height: 620rpx;">
			<div class="name">
				<div class="left">
					<label></label>
					<p>72小时精细预报</p>
				</div>
				<div class="right">
					<div :class="type===1? 'active' : ''" @click="type=1">趋势</div>
					<div :class="type===2? 'active' : ''" @click="type=2">列表</div>
				</div>
			</div>
			<div class="mains">
				<div class="item" v-for="item in hourForeastList">
					<label class="date">{{item.date}}</label>
					<div class="pics" style="justify-content: center;">
						<image class="tianqiImage" :src="('../../static/weather/weatherIcon_'+item.tianqitu+'.png')"
							mode="widthFix"></image>
						<span style="margin-left: 10rpx;width: 70rpx;">{{item.tianqi}}</span>
					</div>
					<p>{{item.tem}}℃</p>
				</div>
			</div>
		</div>
		
		<!-- 10天逐日预报 -->
		<div class="box" style="height: 1000rpx;" v-if="type1===1">
			<div class="name">
				<div class="left">
					<label></label>
					<p>10日预报（℃）</p>
				</div>
				<div class="right">
					<div :class="type1===1? 'active' : ''" @click="type1=1">趋势</div>
					<div :class="type1===2? 'active' : ''" @click="type1=2">列表</div>
				</div>
			</div>
			<iframe style="width: 100%;border: none;height: 100%;"
				:src="tenDaysUrl"></iframe>
		</div>
		<!-- 10天逐日预报列表 -->
		<div class="box" style="height: 800rpx;" v-if="type1===2">
			<div class="name">
				<div class="left">
					<label></label>
					<p>10日预报（℃）</p>
				</div>
				<div class="right">
					<div :class="type1===1? 'active' : ''" @click="type1=1">趋势</div>
					<div :class="type1===2? 'active' : ''" @click="type1=2">列表</div>
				</div>
			</div>
			<div class="mains" style="overflow: hidden;">
				<div class="item" style="height: 70rpx;" v-for="(item,index) in daysForeastList">
					<label class="date" style="width: 190rpx;">{{item.date}} {{index===0? '今天' : index===1? '明天' : item.week}}</label>
					<div class="pics">
						<div class="images">
							<image class="tianqiImage" :src="('../../static/weather/weatherIcon_'+item.tianqitu1+'.png')"
								mode="widthFix"></image>
							<image v-if="item.tianqi1!==item.tianqi2" class="tianqiImage" :src="('../../static/weather/weatherIcon_'+item.tianqitu2+'.png')"
								mode="widthFix"></image>
						</div>
						<span>{{item.tianqi1}}</span>
						<span v-if="item.tianqi1!==item.tianqi2">转{{item.tianqi2}}</span>
					</div>
					<p>{{item.temMin}}~{{item.temMax}}℃</p>
				</div>
			</div>
		</div>
		<div class="boxTitle">
			<label></label>
			<p>雷达拼图</p>
		</div>
		<!-- 雷达拼图 -->
		<div class="box" style="height: 900rpx;margin-top: 0;">
			
			<iframe style="width: 100%;border: none;height: 100%;overflow: hidden;"
				src="http://www.henantianxiang.cn:50001/app/satellitePuzzle.html?pluginsId=NZKKTEZWFH"></iframe>
		</div>
		<!-- 台风路径 -->
		<div class="box">
			<div class="name">
				<div class="left">
					<label></label>
					<p>台风路径</p>
				</div>
			</div>
			<iframe style="width: 100%;border: none;height: 800rpx;"
				src="http://www.henantianxiang.cn:50001/app/tyhoon.html?pluginsId=ZTTTQTTZRT&lon=113.662778&lat=34.706389"></iframe>
		</div>
	</view>
</template>

<script>
	import common from '@/static/js/common.js'
	import stationList from '@/static/json/station.json'
	import $ from 'jquery'
	export default {
		data() {
			return {
				currentWeather: {
					wendu: '',
					shidu: '',
					qiya: '',
					fengxiang: '',
					fengli: '',
					nengjiandu: '',
					tianqi: '',
					tianqitu: ''
				},
				type: 1, //72小时预报   1展示趋势图，2展示列表形式
				type1: 1, //10天预报   1展示趋势图，2展示列表形式
				hourForeastList: null, //72小时逐小时数据
				daysForeastList: null, //10天逐天预报数据
				dateList: null,	//1-3天的日期和星期
				city: uni.getStorageSync('currentCity') || '信阳市',
				longitude: uni.getStorageSync('longitude'),
				latitude: uni.getStorageSync('latitude'),
				// longitude: 114.162763,
				// latitude: 32.143062,
				tenDaysUrl: '',  //未来10天预报
				hoursUrl: '', //72小时预报
				
			}
		},
		methods: {
			//获取当前实况天气
			getCurrentWeather() {
				// 根据城市经纬度获取距离最近的国家站 
				let stationCode = '57297'; //默认选择河南省信阳市
				let minDistance = 0; //最小距离
				// 遍历119个国家站数据，获取距离最近的那个站点的信息
				stationList.forEach((item, index) => {
					if (index === 0) {
						stationCode = item.STATIONCODE;
						minDistance = common.getDistance(item.STATIONLAT, item.STATIONLON, this.latitude,
							this.longitude)
					} else {
						if (common.getDistance(item.STATIONLAT, item.STATIONLON, this.latitude, this
								.longitude) < minDistance) {
							stationCode = item.STATIONCODE;
							minDistance = common.getDistance(item.STATIONLAT, item.STATIONLON, this.latitude,
								this.longitude)
						}
					}
				})
				let querys = {
					code: stationCode, //国家站c:\Users\ADMINI~1\AppData\Local\Temp\SGPicFaceTpBq\18744\06E87315.pn站点号
					time: common.getCurrentFormattedDateTime() //当前时间
				}
				this.getDataByStationCodesAndWeatherKeys(querys)
			},
			getDataByStationCodesAndWeatherKeys(query) {
				uni.request({
					url: `http://218.28.7.243:10003/Weather/ZDZ?u=APPUSE&p=0690affb28cf9b9774785ac680d44ca3&projectname=&calltype=4&iquery=ZDZ.GetDataByStationCodesAndWeatherKeys|1|String;tenminute|String;${query.code}|String;airtemp_current,wind_tenminuteave,visibility_current|DateTime;${query.time}`, //仅为示例，并非真实接口地址。
					success: (res) => {
						let data = res.data.Rows[0]
						this.currentWeather.wendu = Math.round(data.AIRTEMP_CURRENT_VALUE); //当前温度
						this.currentWeather.fengli = data.WIND_TENMINUTE_POWERVALUE + '级'; //分钟风速
						this.currentWeather.fengxiang = common.getWindDirection(data.WIND_TENMINUTE_DIRVALUE,
							data.WIND_TENMINUTE_SPEEDVALUE); //计算风向
						// this.currentWeather.= common.formatAT(data.AIRTEMP_CURRENT_VALUE, data.WIND_TENMINUTE_POWERVALUE);  //体感温度
						this.currentWeather.nengjiandu = data.VISIBILITY_CURRENT_VALUE + 'm' //当前能见度
					}
				});
			},
			getCurrentWeather2() {
				let currentDate = new Date(); //获取当前时间
				let year = currentDate.getFullYear();
				let month = String(currentDate.getMonth() + 1).padStart(2, "0");
				let day = String(currentDate.getDate()).padStart(2, "0");
				let hours = String(currentDate.getHours()).padStart(2, "0");
				let mins = String(currentDate.getMinutes()).padStart(2, "0");
				let seconds = String(currentDate.getSeconds()).padStart(2, "0");
				let startTime = new Date(
					year + "/" + month + "/" + day + " " + hours + ":00:00"
				);
				let times = startTime.getTime();
				let query = {
					beginTime: common.parseTime(times), //查询起始时间
					endTime: common.parseTime(times + 3600000), //查询结束时间
					interhour: 1, //时效间隔（1、3、6、12、24）
					lon: uni.getStorageSync('longitude'), //具体经度,多个以逗号隔开
					lat: uni.getStorageSync('latitude'), //具体纬度,多个以逗号隔开
				};
				uni.request({
					url: `http://218.28.7.243:10003/Weather/NWP?u=APPUSE&p=0690affb28cf9b9774785ac680d44ca3&projectname=&calltype=4&iquery=Stream.GetJxhByTypeCodeAndTimeRangeAndLocation|1|String;JXH_HN|Int32;${query.interhour || 3}|DateTime;${query.beginTime}|DateTime;${query.endTime}|String;${query.lon}|String;${query.lat}&tk=${Date.now()}`,
					success: (res) => {
						let arr = res.data[0].elementlist[0];
						if (arr && arr.elementvalue) {
							// this.currentWeather.tianqi= arr.elementvalue[0];   //天气现象
							this.currentWeather.shidu = Math.round(arr.elementvalue[2]) + '%'; //湿度
							this.currentWeather.tianqi = common.formatWeather(arr.elementvalue[0], 2)
							this.currentWeather.tianqitu = common.formatWeather(arr.elementvalue[0], 1)
						}
					}
				});
			},
			// 未来3天逐小时天气预报接口
			getHoursForecast() {
				let times = Date.now();
				let query = {
					beginTime: common.parseTime(times), //查询起始时间
					endTime: common.parseTime(times + 259200000), //查询结束时间
					lon: this.longitude, //具体经度,多个以逗号隔开
					lat: this.latitude, //具体纬度,多个以逗号隔开
				};
				uni.request({
					url: `http://218.28.7.243:10003/Weather/NWP?u=APPUSE&p=0690affb28cf9b9774785ac680d44ca3&projectname=&calltype=4&iquery=Stream.GetJxhByTypeCodeAndTimeRangeAndLocation|1|String;JXH_HN|Int32;1|DateTime;${query.beginTime}|DateTime;${query.endTime}|String;${query.lon}|String;${query.lat}&tk=${Date.now()}`,
					success: (res) => {
						this.hourForeastList = [];
						let resData= res.data[0].elementlist;
						let producttime = res.data[0].producttime;
						resData.forEach((item,index) => {
							let jrs= new Date(producttime).getTime() + (item.timesession*1000*60*60);
							let nowDate = String(new Date(jrs).getMonth() + 1).padStart(2, '0') + '/' + String(new Date(jrs).getDate()).padStart(2, '0') + ' ' + String(new Date(jrs).getHours()).padStart(2, '0') + '时';
							this.hourForeastList.push({
								'wp': item.elementvalue[0],  //天气形式
								'tem': item.elementvalue[1],  //温度
								'date': nowDate,
								'tianqi': common.formatWeather(item.elementvalue[0], 2),
								'tianqitu': common.formatWeather(item.elementvalue[0], 1)
							})
						})
					}
				});
			},
			// 1-3天的时间列表
			getDateList() {
				let currentDate = new Date(); //获取当前时间
				let year = currentDate.getFullYear();
				let month = String(currentDate.getMonth() + 1).padStart(2, '0');
				let day = String(currentDate.getDate()-1).padStart(2, '0');
				this.dateList= []
				for (var i = 0; i < 3; i++) {
					let newTimeDate = new Date(Date.now() + 86400000 * i); //计算出之后9天每天的时间戳，转成日期展示
					let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
					this.dateList.push({
						'date': String(newTimeDate.getMonth()+1).padStart(2, '0') + '/' + String(newTimeDate.getDate()).padStart(2, '0'),
						'weekDays': weekDays[newTimeDate.getDay()]
					})
				}
			},
			//10天逐天 天气预报接口
			getDaysForecast() {
				let times = Date.now();
				let query = {
					beginTime: common.parseTime(times), //查询起始时间
					endTime: common.parseTime(times + 864000000), //查询结束时间
					interhour: 24, //时效间隔（1、3、6、12、24）
					lon: this.longitude, //具体经度,多个以逗号隔开
					lat: this.latitude, //具体纬度,多个以逗号隔开
				};
				uni.request({
					url: `http://218.28.7.243:10003/Weather/NWP?u=APPUSE&p=0690affb28cf9b9774785ac680d44ca3&projectname=&calltype=4&iquery=Stream.GetJxhByTypeCodeAndTimeRangeAndLocation|1|String;JXH_HN|Int32;${query.interhour || 24}|DateTime;${query.beginTime}|DateTime;${query.endTime}|String;${query.lon}|String;${query.lat}&tk=${Date.now()}`,
					success: (res) => {
						this.daysForeastList = [];
						let resData= res.data[0].elementlist;
						let producttime = res.data[0].producttime;
						resData.forEach((item,index) => {
							let jrs= new Date(producttime).getTime() + (index*1000*60*60*24);
							let nowDate = String(new Date(jrs).getMonth() + 1).padStart(2, '0') + '/' + String(new Date(jrs).getDate()).padStart(2, '0');
							let weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
							this.daysForeastList.push({
								'temMax': Math.round(item.elementvalue[2]),  //最高温度
								'temMin': Math.round(item.elementvalue[3]),  //最低温度
								'date': nowDate,
								'week': weekDays[(new Date(jrs).getDay())],
								'tianqi1': common.formatWeather(item.elementvalue[0], 2),
								'tianqi2': common.formatWeather(item.elementvalue[1], 2),
								'tianqitu1': common.formatWeather(item.elementvalue[0], 1),
								'tianqitu2': common.formatWeather(item.elementvalue[1], 1)
							})
						})
					}
				});
			},
		},
		onLoad() {
			let that= this;
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					uni.setStorageSync('longitude', res.longitude);
					uni.setStorageSync('latitude', res.latitude);
					let _url= 'https://apis.map.qq.com/ws/geocoder/v1/?location='+ res.latitude + ',' + res.longitude + '&key=F65BZ-3SNY3-I6D3O-R4B5E-QRVAH-PFF66&get_poi=1'
					$.ajax({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/',
						type: 'get',
						dataType: 'jsonp',
						data: {
							location: res.latitude+","+res.longitude,
							key: 'F65BZ-3SNY3-I6D3O-R4B5E-QRVAH-PFF66',
							output: 'jsonp'
						},
						success: function (res) {
							if(res.result.address_component.province=== '河南省') {
								let city= res.result.address_component.city;
								let district= res.result.address_component.district;
								uni.setStorageSync('currentCity', city+district);
								that.city= (city+district)
							} else {
								uni.setStorageSync('longitude', '114.162763');
								uni.setStorageSync('latitude', '32.143062');
								uni.setStorageSync('currentCity', '信阳市');
							}
							that.getCurrentWeather(); //获取当前实况天气
							that.getCurrentWeather2(); //获取当前实况天气2
							that.getDateList(); // 1-3天的时间列表
							that.getHoursForecast(); // 1-3天逐小时天气预报接口
							that.getDaysForecast(); //未来10天逐天天气预报
							that.tenDaysUrl= `http://www.henantianxiang.cn:50001/app/week.html?pluginsId=BPTPFASWDH&lon=${uni.getStorageSync('longitude')}&lat=${uni.getStorageSync('latitude')}`;
							that.hoursUrl = `http://www.henantianxiang.cn:50001/app/hour.html?pluginsId=WKYZLESUHR&lon=${uni.getStorageSync('longitude')}&lat=${uni.getStorageSync('latitude')}`
						}
					})
				},
				fail: function(res) {
					uni.setStorageSync('longitude', '114.162763');
					uni.setStorageSync('latitude', '32.143062');
					uni.setStorageSync('currentCity', '信阳市');
					that.getCurrentWeather(); //获取当前实况天气
					that.getCurrentWeather2(); //获取当前实况天气2
					that.getDateList(); // 1-3天的时间列表
					that.getHoursForecast(); // 1-3天逐小时天气预报接口
					that.getDaysForecast(); //未来10天逐天天气预报
					that.tenDaysUrl= 'http://www.henantianxiang.cn:50001/app/week.html?pluginsId=BPTPFASWDH&lon=114.162763&lat=32.143062';
					that.hoursUrl = 'http://www.henantianxiang.cn:50001/app/hour.html?pluginsId=WKYZLESUHR&lon=114.162763&lat=32.143062';
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	* {
		scrollbar-width: none;
		/* 隐藏滚动条（适用于较新版本的浏览器） */
	}

	.container {
		background-image: url('/static/background.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		position: fixed;
		top: 0%;
		bottom: 0%;
		left: 0;
		right: 0;
		overflow-y: scroll;
	}

	.title {
		box-sizing: border-box;
		padding: 0 30rpx;
		line-height: 2;
		font-weight: 550;
		font-size: 36rpx;
		color: #181818;
	}

	.position {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		margin-top: 30rpx;
		padding: 0 30rpx;

		image {
			width: 30rpx;
		}

		span {
			font-size: 28rpx;
			margin: 0 8rpx;
		}
	}

	.main {
		padding: 0 30rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.wendu {
			font-weight: bold;
			font-size: 260rpx;
			color: #5694FC;
			line-height: 1;
			position: relative;
			margin-top: 20rpx;

			>p {
				transform: scale(1, 1.11);
				text-shadow: 0px 4px 24px rgba(25, 91, 200, 0.47);
			}

			label {
				position: absolute;
				top: 20rpx;
				right: -50rpx;
				font-size: 120rpx;
			}

			.tianqiImage {
				position: absolute;
				width: 240rpx;
				right: -160rpx;
				bottom: -120rpx;
			}
		}

		.tianqi {
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
		}
	}

	.grid {
		display: flex;
		align-items: center;
		width: 90%;
		height: 160rpx;
		margin: 80rpx auto 0;
		border-radius: 2em;
		box-shadow: 0rpx 8rpx 24rpx 4rpx rgba(223, 238, 255, 0.61);
		background: linear-gradient(180deg, rgba(241, 246, 255, 0.31) 0%, rgba(255, 255, 255, 0.78) 100%);

		.item {
			width: 25%;
			display: flex;
			height: 80%;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;

			image {
				height: 30rpx;
			}

			span {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			label {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	
	.boxTitle {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		padding-left: 15rpx;
		background-color: white;
		height: 36px;
		box-shadow: 0rpx 4rpx 18rpx 4rpx rgba(127, 156, 255, 0.15);
		label {
			width: 6rpx;
			height: 30rpx;
			background-color: #FF9C00;
			display: inline-block;
			margin-right: 14rpx;
			border-radius: 2rpx;
		}
	}

	.box {
		background-color: white;
		position: relative;
		margin: 30rpx 0;
		box-sizing: border;
		padding: 10rpx 0 10rpx 0;
		box-shadow: 0rpx 4rpx 18rpx 4rpx rgba(127, 156, 255, 0.15);
		.name {
			position: absolute;
			padding: 0 15rpx;
			top: 0;
			left: 0px;
			right: 0px;
			height: 40px;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: black;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			z-index: 999;
			.left {
				display: flex;
				align-items: center;
				font-weight: 500;
			}
			.right{
				display: flex;
				font-size: 28rpx;
				>div {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 6rpx 0;
					background-color: #E6E6E6;
					width: 100rpx;
				}
				.active {
					background-color: #5A98DE;
					color: white;
				}
			}
			label {
				width: 6rpx;
				height: 30rpx;
				background-color: #FF9C00;
				display: inline-block;
				margin-right: 14rpx;
				border-radius: 2rpx;
			}
		}
		.mains {
			height: 84%;
			padding: 90rpx 0 20rpx 0;
			overflow-y: scroll;
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				font-size: 26rpx;
				height: 36px;
				padding: 0 20rpx;
				box-sizing: border-box;
				.pics {
					display: flex;
					align-items: center;
					// justify-content: center;
					width: 40%;
					.images {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						width: 40%;
					}
					image {
						width: 40rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.mains .item:nth-child(2n) {
			background-color: white;
		}
		.mains .item:nth-child(2n+1) {
			background-color: #F3F7FF;
		}
	}

	.hoursForecast {
		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				width: 31%;
				background: linear-gradient(180deg, rgba(173, 204, 255, 0.08) 0%, rgba(124, 191, 253, 0.22) 100%);
				border-radius: 24rpx;
				border: 2rpx solid rgba(70, 139, 251, 0.08);

				image {
					height: 50rpx;
					margin-top: -8rpx;
					margin-bottom: 2rpx;
				}

				.date {
					display: flex;
					justify-content: space-between;
					padding: 20rpx;

					span {
						font-weight: 400;
						font-size: 26rpx;
						color: #181818;
					}

					label {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
				}

				.shangwu,
				.xiawu {
					padding: 20rpx 12rpx;
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						flex-direction: column;
						align-items: center;

						i {
							font-weight: 400;
							font-size: 22rpx;
							color: #333333;
							font-style: normal;
							line-height: 0.8;
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						span {
							font-weight: 520;
							font-size: 32rpx;
							color: #181818;
							line-height: 1.8;
						}

						label {
							font-weight: 400;
							font-size: 22rpx;
							color: #181818;
							line-height: 1;
						}
					}
				}
			}
		}
	}
</style>